<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Features - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-Camera.html">Camera</a><ul class='methods'><li data-type='method'><a href="module-Camera.html#.focusOnBounds">focusOnBounds</a></li><li data-type='method'><a href="module-Camera.html#.focusOnLocation">focusOnLocation</a></li><li data-type='method'><a href="module-Camera.html#.onCameraChange">onCameraChange</a></li><li data-type='method'><a href="module-Camera.html#.orbitTarget">orbitTarget</a></li><li data-type='method'><a href="module-Camera.html#.setCameraMode">setCameraMode</a></li></ul></li><li><a href="module-Controls.html">Controls</a><ul class='methods'><li data-type='method'><a href="module-Controls.html#.configureControls">configureControls</a></li></ul></li><li><a href="module-Core.html">Core</a><ul class='methods'><li data-type='method'><a href="module-Core.html#.datafileForLocation">datafileForLocation</a></li><li data-type='method'><a href="module-Core.html#.displayLocation">displayLocation</a></li><li data-type='method'><a href="module-Core.html#.init">init</a></li><li data-type='method'><a href="module-Core.html#.onBoundsFocused">onBoundsFocused</a></li><li data-type='method'><a href="module-Core.html#.onLocationError">onLocationError</a></li><li data-type='method'><a href="module-Core.html#.onLocationFocused">onLocationFocused</a></li><li data-type='method'><a href="module-Core.html#.onLocationLoaded">onLocationLoaded</a></li><li data-type='method'><a href="module-Core.html#.onUserInteraction">onUserInteraction</a></li><li data-type='method'><a href="module-Core.html#.setDisplayErrors">setDisplayErrors</a></li></ul></li><li><a href="module-Environment.html">Environment</a><ul class='methods'><li data-type='method'><a href="module-Environment.html#.environmentEditor">environmentEditor</a></li><li data-type='method'><a href="module-Environment.html#.setEnvironment">setEnvironment</a></li></ul></li><li><a href="module-Features.html">Features</a><ul class='methods'><li data-type='method'><a href="module-Features.html#.addBuiltinOverlay">addBuiltinOverlay</a></li><li data-type='method'><a href="module-Features.html#.addOverlay">addOverlay</a></li><li data-type='method'><a href="module-Features.html#.focusOnFeature">focusOnFeature</a></li><li data-type='method'><a href="module-Features.html#.highlightFeature">highlightFeature</a></li><li data-type='method'><a href="module-Features.html#.onFeatureClicked">onFeatureClicked</a></li><li data-type='method'><a href="module-Features.html#.onFeatureSelected">onFeatureSelected</a></li><li data-type='method'><a href="module-Features.html#.onOverlayAdded">onOverlayAdded</a></li><li data-type='method'><a href="module-Features.html#.removeOverlay">removeOverlay</a></li><li data-type='method'><a href="module-Features.html#.updateOverlay">updateOverlay</a></li></ul></li><li><a href="module-Location.html">Location</a><ul class='methods'><li data-type='method'><a href="module-Location.html#.setUserLocation">setUserLocation</a></li><li data-type='method'><a href="module-Location.html#.toggleUserLocationTracking">toggleUserLocationTracking</a></li></ul></li><li><a href="module-Rendering.html">Rendering</a><ul class='methods'><li data-type='method'><a href="module-Rendering.html#.pause">pause</a></li><li data-type='method'><a href="module-Rendering.html#.play">play</a></li></ul></li><li><a href="module-UI.html">UI</a><ul class='methods'><li data-type='method'><a href="module-UI.html#.setCameraModeControlVisible">setCameraModeControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setCompassVisible">setCompassVisible</a></li><li data-type='method'><a href="module-UI.html#.setRotationControlVisible">setRotationControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setUserLocationControlVisible">setUserLocationControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setZoomControlVisible">setZoomControlVisible</a></li></ul></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">Features</h1>
    

    




<section>

<header>
    
        
            
        
    
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description">Features are elements in the rendered scene
that are displayed on top of the 3D world, such as lines
or POIs.

Features are added as part of an overlay, which takes the
form of a <a href="http://geojson.org/">geojson</a> FeatureCollection.
Each feature should have a unique `id`, to allow referencing
later by other methods.

To explore the different options available when styling
the overlays, take a look at the <a href="https://felixpalmer.github.io/procedural-gl-js/docs/overlays.html">Overlay Editor</a></div>
        

        
            




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>













    <h5>Example</h5>
    
    <pre class="prettyprint"><code>// Add an overlay and focus on features when clicked
var featureCollection = { ... };
Procedural.addOverlay( featureCollection );
Procedural.onFeatureClicked = function ( id ) {
  Procedural.focusOnFeature( id );
};</code></pre>


















        
    
    </div>

    

    

    

     

    

    

    
        <h3 class="subsection-title">Methods</h3>

        
            

    

    <h4 class="name" id=".addBuiltinOverlay"><span class="type-signature">(static) </span>addBuiltinOverlay<span class="signature">(id)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Adds a built-in overlay to the 3D world.
Currently supported overlays are: 'peaks', 'places'.
See also <a href="module-Features.html#.removeOverlay">Features.removeOverlay</a>
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.addBuiltinOverlay( 'peaks' );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>id</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>
|

<span class="param-type">Array</span>


            
            </td>

            

            

            <td class="description last">id of overlay to add, or array of ids</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".addOverlay"><span class="type-signature">(static) </span>addOverlay<span class="signature">(overlay)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Adds an overlay to the 3D world. An overlay is a collection of `Features`, specified
in geojson format as a `FeatureCollection`. Each of these `Features` should have a unique id
which is used by other methods when referencing each `Feature`. See also the examples in the <a href="http://www.procedural.eu/js-sdk/overlays.html">Overlay Editor</a>. See also <a href="module-Features.html#.updateOverlay">Features.updateOverlay</a>, <a href="module-Features.html#.removeOverlay">Features.removeOverlay</a>
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>var featureCollection = {
  'name': 'example',
  'type': 'FeatureCollection',
  'features': [
    {
      'id': 0,
      'type': 'Feature',
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [ 13.55, 47.25 ],
          [ 13.56, 47.26 ]
        ]
      },
      'properties': {
        'color': '#f30e32'
      }
    }
  ]
}

Procedural.addOverlay( featureCollection );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>overlay</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">a geojson FeatureCollection</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".focusOnFeature"><span class="type-signature">(static) </span>focusOnFeature<span class="signature">(id)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Focuses the camera on a feature on the map
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.focusOnFeature( 3 );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>id</code></td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            

            <td class="description last">id of Feature to focus on</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".highlightFeature"><span class="type-signature">(static) </span>highlightFeature<span class="signature">(id)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Highlights a feature on the map
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.highlightFeature( 3 );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>id</code></td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            

            <td class="description last">id of Feature to highlight</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".onFeatureClicked"><span class="type-signature">(static) </span>onFeatureClicked<span class="signature">(id)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when a feature is clicked
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onFeatureClicked = function ( id ) {
  console.log( 'Feature clicked:', id );
}</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>id</code></td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            

            <td class="description last">id of Feature that was clicked</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".onFeatureSelected"><span class="type-signature">(static) </span>onFeatureSelected<span class="signature">(id)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when a feature is selected,
by hovering over it with the mouse
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onFeatureSelected = function ( id ) {
  console.log( 'Feature selected:', id );
}</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>id</code></td>
            

            <td class="type">
            
                
<span class="param-type">Number</span>


            
            </td>

            

            

            <td class="description last">id of Feature that was selected</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".onOverlayAdded"><span class="type-signature">(static) </span>onOverlayAdded<span class="signature">(name)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when an overlay has been added
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onOverlayAdded = function ( name ) {
  console.log( 'Overlay added:', name );
}</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>name</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            
            </td>

            

            

            <td class="description last">name of overlay that was added</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".removeOverlay"><span class="type-signature">(static) </span>removeOverlay<span class="signature">(name)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Removes an overlay from the 3D world. See also <a href="module-Features.html#.addOverlay">Features.addOverlay</a>
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>var featureCollection = {
  'name': 'example',
  'type': 'FeatureCollection',
  'features': [ ... ]
}
Procedural.addOverlay( featureCollection );

...

Procedural.removeOverlay( 'example' );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>name</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            
            </td>

            

            

            <td class="description last">name of overlay to remove, defined when adding an overlay using <a href="module-Features.html#.addOverlay">Features.addOverlay</a></td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".updateOverlay"><span class="type-signature">(static) </span>updateOverlay<span class="signature">(overlay)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Updates an overlay that was previously added to the 3D world.
Using this method is much faster than repeatedly calling `addOverlay`,
but the update is limited to the positions of the features in the overlay.
The format is the same as for `addOverlay`, but only the `coordinates`
will be updated - all feature properties will be ignored.

To update an overlay it is necessary to provide the
same `name` as was used for `addOverlay` and for the updated
data to have the same number of features as the original overlay, in
the same order.

Note that currently only `Point` geometries can be updated.
See also <a href="module-Features.html#.addOverlay">Features.addOverlay</a>
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>var featureCollection = {
  'name': 'example',
  'type': 'FeatureCollection',
  'features': [
    {
      'id': 0,
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [ 13.55, 47.25 ]
      }
    }
  ]
}

Procedural.updateOverlay( featureCollection );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>overlay</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">a geojson FeatureCollection</td>
        </tr>

    
    </tbody>
</table>
















        
    

    

    
</article>

</section>




</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>